 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrapper{
				width: 300px;
				margin: 10px auto;
			}
			#star_word{
				overflow: hidden;
			}
			#star li{
				float: left;
				width: 20px;
				height: 20px;
				margin: 10px;
				list-style: none;
				display: inline;
				cursor: pointer;
			}
			#star .active{
				color: #FF8C00;
			}
			#star_word{
				width: 80px;
				height: 30px;
				line-height: 30px;
				border: 1px solid #ccc;
				margin: 10px;
				text-align: center;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			评分结果
			<span id="result"></span>
			<ul id="star">
				<li>★</li>
				<li>★</li>
				<li>★</li>
				<li>★</li>
				<li>★</li>
			</ul>
			<div id="star_word">3颗星</div>
		</div>
		
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var star = document.getElementById("star");
			var star_li = star.getElementsByTagName("li");
			var star_word = document.getElementById("star_word");
			var result = document.getElementById("result");
			var i = 0;\
			// var j = 0;
			var len = star_li.length;
			var word = ["1颗星","2颗星","3颗星","4颗星","5颗星"]
			for(var i=0;i<len;i++){
				star_li[i].index = i;
				star_li[i].onmouseover = function(){
					star_word.style.display = "block"
					star_word.innerHTML = word[this.index]
					for(var i=0;i<=this.index;i++){
						star_li[i].className = "active"
					}
				}
				star_li[i].onmouseout = function(){
					star_word.style.display = "none"
					// star_word.innerHTML = word[this.index]
					for(var i=0;i<len;i++){
						star_li[i].className = ""
					}
				}
				star_li[i].onclick = function(){
					result.innerHTML = (this.index+1)+"分"
				}
			}
		}
	</script>
</html>
